<template>
	<view>
		<view class="nav2">
			<u-navbar title="报告解读" bgColor="transparent" :fixed="false" autoBack>
			</u-navbar>
		</view>
		<view class="m30">
			<view class="radius30 result_box pore" :style="{'height':isLock == 0?'90vh':'auto'}">
				<view class="">
					<view class="img">
						<image :src="api_host + info.image" mode="widthFix" class="width100"></image>
					</view>
					<u-gap height="30"></u-gap>
					<view class="mb30" v-for="(item,index) in info.dimensionDescs" :key="index">
						<view class="title-name pore">{{item.title}}</view>
						<view class="mt20 flex" style="align-items: flex-start;" v-for="(item2,index2) in item.contents" :key="index2">
							<text class="cyellow">●</text>
							<text class="f26 c343 ml10">{{item2}}</text>
						</view>
					</view>
					<u-gap height="40"></u-gap>
					<view class="mb20 flex-au btns-box" v-if="isLock == 1">
						<view class="flex1 mr20 ml30">
							<u-button shape="circle" color="#fff" :customStyle="{'color':'#34314F'}"
								@click="nologinJump('/subpage/caractere/poster?id='+id)">
								生成报告卡片
							</u-button>
						</view>
						<view class="flex1 ml20 mr30">
							<u-button shape="circle" open-type="share" color="#FFDE6D"
								:customStyle="{'color':'#34314F'}">
								邀请好友测试
							</u-button>
						</view>
					</view>
				</view>
				<view class="lock_box flex-au flex-col" v-if="isLock == 0">
					<view class="textC">
						<view class="">
							<image src="../static/caractere/lock2.png" mode="widthFix" style="width: 120rpx;"></image>
						</view>
						<view class="textC cfff">仅需一位好友的助力 <br> 即可解锁您的专属报告</view>
						<u-gap height="20"></u-gap>
						<u-button shape="circle" color="#FFDE6D" open-type="share"
							:customStyle="{'color':'#34314F','border':'1px solid #FFDE6D'}">
							邀请助力
						</u-button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		getResultlock,
		getResultbyid
	} from '@/common/api_character.js'
	export default {
		name: '',
		data() {
			return {
				id:'',
				isLock: 0,
				info: {},
				timer: null
			}
		},
		onLoad(option) {
			this.id = option.id
			this.getResultlock()
		},
		destroyed() {
			clearTimeout(this.timer)
		},
		onShareAppMessage(res) {
			return {
				title: this.isLock == 0 ? '只差一步就解锁了，快来帮帮我吧' : '你是I人还是E人？一测便知！',
				path: this.isLock == 0 ? '/subpage/caractere/help?id=' + this.id + '&user_id=' + this.userInfo.id :
					'/subpage/caractere/index',
				desc: this.isLock == 0 ? '报告解读' : '能力测评',
				content: this.isLock == 0 ? '报告解读' : '能力测评',
				imageUrl:this.api_host + '/profile/upload/2024/07/26/0ccc020ae8964a1c845e3368328b6fac_20240726170243A001.jpg',
				success(res) {
					uni.showToast({
						title: '分享成功'
					})
				},
				fail(res) {
					uni.showToast({
						title: '分享失败',
						icon: 'none'
					})
				}
			}
		},
		methods: {
			async getResultlock(status) {
				const res = await getResultlock({
					id: this.id
				})
				if (res.code == 200) {
					this.isLock = res.data.isLock
					if(this.isLock == 0){
						this.timer = setTimeout(() =>{
							this.getResultlock(1)
						},2000)
					}
					if (!status) {
						this.getResultbyid()
					}
				}
			},
			async getResultbyid() {
				uni.showLoading({
					mask: true
				})
				const res = await getResultbyid({
					id: this.id
				})
				if (res.code == 200) {
					this.info = res.data
				}
				uni.hideLoading()
			}
		}
	}
</script>

<style lang="scss">
	.f26{
		line-height: 50rpx;
	}
	page {
		background-color: #FEF4E8;
	}
	.img{
		padding: 30rpx;
		border-radius: 30rpx;
		overflow: hidden;
		border:3px solid #fff;
		background-color: #fff;
		background-image: linear-gradient(to bottom, #FFF6C8, #fff, #fff, #fff);
	}
	.title-name {
		color: #34314F;
		font-weight: bold;
		z-index: 10;
		padding-left: 20rpx;
	}

	.title-name::after {
		position: absolute;
		content: '';
		left: 0rpx;
		top: 0;
		height: 100%;
		width: 200rpx;
		border-radius: 30rpx;
		background-color: #FEF4E8;
		background-image: linear-gradient(to right, #FDDE74, #fff);
		z-index: -1;
	}

	.result_box {
		overflow: hidden;

		.lock_box {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(#000, 0.8);
			backdrop-filter: blur(10px);
			z-index: 999;
		}
	}
	.btns-box{
		z-index: 99;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
	}
</style>